<template>
  <div>
    <input type="text" v-model="mytext" />
    <ul>
      <li v-for="(data, index) in list" :key="index">{{ data }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted, watch, reactive } from 'vue'

export default {
  setup () {
    const mytext = ref('')
    const list = ref([])
    let cacheeList = []

    const state = reactive({
      myname: 'lisa'
    })

    watch(mytext, () => {
      console.log(mytext.value)
      list.value = cacheeList.filter(item => item.includes(mytext.value))

      state.myname = mytext.value
    })

    watch(() => state.myname, (val) => {
      console.log('myname --- ', val)
      console.log('myname --- ', state.myname)
    })

    onMounted(() => {
      fetch('/test.json').then(res => res.json()).then(res => {
        console.log(res)
        list.value = res.list // 立即显示
        cacheeList = res.list // 操作的数据
      })
    })

    return {
      mytext,
      list,
      cacheeList,
      state
    }
  }
}
</script>
